<template>
  <div>
    <el-popover placement="bottom" :width="300" trigger="hover">
      <template #reference>
        <el-button link type="primary" size="small" @mouseenter="syncStore()">
          <el-icon><Tools /></el-icon>
          <span>设置</span>
        </el-button>
      </template>
      <div style="padding-top: 16px" v-loading="isLoading">
        <el-form size="small" label-width="50px">
          <!-- <el-divider border-style="dashed">
          <el-text type="info">图表设置</el-text>
        </el-divider> -->
          <el-form-item label="范围">
            <el-radio-group
              v-model="flowStore.chartConfig.southAirportsChart.type"
              @change="handleChange()"
            >
              <el-radio-button value="APP">全部</el-radio-button>
              <el-radio-button value="ZUYB">ZUYB</el-radio-button>
              <el-radio-button value="ZULZ">ZULZ</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="粒度">
            <el-radio-group
              v-model="flowStore.chartConfig.southAirportsChart.dataGranularity"
              @change="handleGranularityChange()"
            >
              <el-radio-button :value="1">15分钟</el-radio-button>
              <el-radio-button :value="2">30分钟</el-radio-button>
              <el-radio-button :value="4">60分钟</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="步长">
            <el-radio-group
              v-model="flowStore.chartConfig.southAirportsChart.dataStep"
              @change="handleStepChange()"
            >
              <el-radio-button :value="1">15分钟</el-radio-button>
              <el-radio-button :value="2">30分钟</el-radio-button>
              <el-radio-button :value="4">60分钟</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="间隔">
            <el-radio-group
              v-model="flowStore.chartConfig.southAirportsChart.dataInterval"
              @change="handleIntervalChange()"
            >
              <el-radio-button :value="1">15分钟</el-radio-button>
              <el-radio-button :value="2">30分钟</el-radio-button>
              <el-radio-button :value="4">60分钟</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-divider />
        <el-form size="small" label-width="50px" v-if="limits">
          <!-- <el-divider border-style="dashed">
          <el-text type="info">架次限制 (未完成)</el-text>
        </el-divider> -->
          <el-form-item label="ZUYB">
            <el-text type="info">总&nbsp;</el-text>
            <el-input-number
              style="width: 80px"
              :min="0"
              :max="200"
              v-model="limits.ZUYB.ALL"
            />
            <el-text type="info">&emsp;落&nbsp;</el-text>
            <el-input-number
              style="width: 80px"
              :min="0"
              :max="200"
              v-model="limits.ZUYB.ARR"
            />
            <el-text
              type="warning"
              v-if="limits.ZUYB.ALL == 0 && limits.ZUYB.ARR == 0"
              >&emsp;<el-icon><WarningFilled /></el-icon
            ></el-text>
          </el-form-item>
          <el-form-item label="ZULZ">
            <el-text type="info">总&nbsp;</el-text>
            <el-input-number
              style="width: 80px"
              :min="0"
              :max="200"
              v-model="limits.ZULZ.ALL"
            />
            <el-text type="info">&emsp;落&nbsp;</el-text>
            <el-input-number
              style="width: 80px"
              :min="0"
              :max="200"
              v-model="limits.ZULZ.ARR"
            />
            <el-text
              type="warning"
              v-if="limits.ZULZ.ALL == 0 && limits.ZULZ.ARR == 0"
              >&emsp;<el-icon><WarningFilled /></el-icon
            ></el-text>
          </el-form-item>
          <div style="text-align: center; padding: 12px">
            <el-button
              type="primary"
              @click="saveLimits()"
              :disabled="!isChanged"
              >保存架次限制</el-button
            >
          </div>
        </el-form>
        <el-divider v-if="false" />
      </div>
    </el-popover>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import axios from "axios";
import dayjs from "dayjs";
import useFlowStore from "@/store/flow.js";
const flowStore = useFlowStore();
const emits = defineEmits(["change"]);
const handleGranularityChange = () => {
  flowStore.chartConfig.southAirportsChart.dataStep =
    flowStore.chartConfig.southAirportsChart.dataGranularity;
  flowStore.chartConfig.southAirportsChart.dataInterval =
    flowStore.chartConfig.southAirportsChart.dataGranularity;
  handleChange();
};

const handleStepChange = () => {
  if (
    flowStore.chartConfig.southAirportsChart.dataStep !=
    flowStore.chartConfig.southAirportsChart.dataInterval
  ) {
    flowStore.chartConfig.southAirportsChart.dataGranularity = -1;
  }
  handleChange();
};

const handleIntervalChange = () => {
  if (
    flowStore.chartConfig.southAirportsChart.dataStep !=
    flowStore.chartConfig.southAirportsChart.dataInterval
  ) {
    flowStore.chartConfig.southAirportsChart.dataGranularity = -1;
  }
  handleChange();
};

const handleChange = () => {
  emits("change");
};

const limits = ref(null);

const isChanged = computed(
  () =>
    JSON.stringify(flowStore.airportFlowLimits) != JSON.stringify(limits.value)
);

const syncStore = () => {
  // console.log("syncStore");
  if (flowStore.airportFlowLimits != null) {
    limits.value = JSON.parse(JSON.stringify(flowStore.airportFlowLimits));
  }
};

const isLoading = ref(false);

const saveLimits = () => {
  flowStore.airportFlowLimits = JSON.parse(JSON.stringify(limits.value));
  isLoading.value = true;
  axios
    .post("api/common_params.php", {
      method: "SAVE",
      keys: ["airportFlowLimits"],
      values: [limits.value],
    })
    .then((res) => {
      console.log("saveLimits", res.data);
      isLoading.value = false;
      if (res.data[0]) {
        ElNotification({
          type: "success",
          title: "架次限制已保存",
        });
      } else {
        ElNotification({
          type: "warning",
          title: "架次限制保存失败",
        });
      }
    })
    .catch((err) => {
      console.error("saveLimits", err);
      isLoading.value = false;
      ElNotification({
        type: "error",
        title: "架次限制保存出错",
        message: err.message,
      });
    });
};
</script>
